<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="./../home.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="content" >
        <p:growl id="msgGrowl"  />
        <div id="container">
            <p:panel header="Panel de Busqueda" styleClass="panel panel-primary" toggleable="true" toggleSpeed="300">
                <f:event type="preRenderView" listener="#{historialBean.initList}" />
                <div class="form-horizontal" style="margin-top: 5px;">
                    <div class="form-group has-feedback">
                        <h:outputText styleClass="col-sm-1 control-label" style="text-align: right;font-size: 13px;font-weight: bold;width: 8.433333333333332%;" value="Can :" />
                        <div class="col-sm-3">
                            <h:outputText styleClass="form-control" value="#{historialBean.historialFiltro.nombre}" id="namePerro" />
                        </div>
                        <div class="col-sm-2" style="padding-left: 0px;">
                            <button class="btn btn-primary" style="text-align: left;margin-top: 1px;"  data-toggle="modal" data-target=".bs-example-modal-lg"><img style="padding-left: 0px" src="#{request.contextPath}/resources/image/find.png" /></button>
                        </div>
                    </div>
                    <h:form id="frmBuscar" >
                        <h:commandButton value="Buscar" actionListener="#{historialBean.busqueda}"  styleClass="btn btn-primary" style="margin-bottom: 5px;" >
                            <f:ajax execute="@form" render=":frmHistoriales :frmIrHistorial" />
                        </h:commandButton>
                    </h:form>
                </div>
            </p:panel>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <h:form id="frmIrHistorial">
                            <h:panelGroup rendered="#{usuarioBean.permiso.crear eq true}">
                                <h:panelGroup id="frmPintar" rendered="#{historialBean.historialFiltro.idPerro ne 0}">

                                    <p:commandButton styleClass="btn btn-primary"  value="Nuevo Historial" action="#{historialBean.irCrear}" />

                                </h:panelGroup>
                            </h:panelGroup>

                        </h:form>
                        <p:spacer width="20px"/>
                        <h:form id="frmHistoriales">
                            <p:dataTable value="#{historialBean.historiales}" var="list" 
                                         paginator="true" rows="10" lazy="true" rowIndexVar="rowIndex" emptyMessage="No existen registros del Historial Medico del Can"
                                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" >

                                <f:facet name="header">
                                    <h:commandLink styleClass="btnExportarExcel" actionListener="#{historialBean.exportar}">
                                        <h:graphicImage value="/resources/image/xls.gif" />
                                    </h:commandLink>
                                </f:facet>    
                                <p:column style="text-align: center;width: 6%;">
                                    <f:facet name="header">
                                        #
                                    </f:facet>
                                    <h:outputText value="#{rowIndex+1}" />

                                </p:column>
                                <p:column headerText="Diagnostico" style="text-align: center;white-space: normal;width: 60%;font-size: 14px;">
                                    <h:outputText value="#{list.diagnostico}" />
                                </p:column>
                                <p:column headerText="Fecha de Registro" style="text-align: center;width: 20%;font-size: 14px;">
                                    <h:outputText value="#{list.fechaRegistro}" >
                                        <f:converter converterId="timestampConverter" />
                                    </h:outputText>
                                </p:column>
                                <p:column style="text-align: center;width: 10%;font-size: 13px;">
                                    <h:panelGroup rendered="#{usuarioBean.permiso.actualizar eq true}">
                                        <p:commandButton icon="icon-update" action="#{historialBean.irActualizar(list.id)}" />
                                    </h:panelGroup>
                                    <h:panelGroup rendered="#{usuarioBean.permiso.eliminar eq true}">
                                        <p:commandButton icon="icon-delete" actionListener="#{historialBean.prepararEliminar(list.id)}" oncomplete="dlgCan.show();"  />
                                    </h:panelGroup>

                                </p:column>
                            </p:dataTable>
                        </h:form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Dialog -->
        <div class="modal fade bs-example-modal-lg" id="basic" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">Seleccionar Perro</h4>
                    </div>
                    <div class="modal-body">
                        <h:form id="frmBusquedaPerro">
                            <p:dataTable value="#{historialBean.perros}" var="list" 
                                         paginator="true" rows="10" lazy="true" rowIndexVar="rowIndex" emptyMessage="No existen registros de Canes"
                                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  >
                                <p:column style="text-align: center;">

                                    <p:commandButton icon="icon-choice" actionListener="#{historialBean.capturar(list.id,list.nombre)}" update=":namePerro" oncomplete="$('#basic').modal('hide');" />
                                </p:column>
                                <p:column headerText="Nombre" style="text-align: center;">
                                    <h:outputText value="#{list.nombre}" />
                                </p:column>
                                <p:column headerText="Color" style="text-align: center;">
                                    <h:outputText value="#{list.color.nombreColor}" />
                                </p:column>
                                <p:column headerText="Raza" style="text-align: center;">
                                    <h:outputText value="#{list.raza.descripcion}" />
                                </p:column>
                                <p:column headerText="Fecha de nacimiento" style="text-align: center;">
                                    <h:outputText value="#{list.fechaNacimiento}" >
                                        <f:convertDateTime pattern="dd/MM/yyyy" />
                                    </h:outputText>
                                </p:column>
                            </p:dataTable>
                        </h:form>
                    </div>
                </div>
            </div>
        </div>
        <p:dialog modal="true" maximizable="false" widgetVar="dlgCan" header="Eliminar Registro">
            <p>¿Desea eliminar el Historial Clinico?</p>
            <h:form id="frmEliminar">
                <p:commandButton value="Aceptar" actionListener="#{historialBean.eliminarHistorial}" update=":frmHistoriales,:msgGrowl" oncomplete="dlgCan.hide();" />
                <p:commandButton value="Cancelar" oncomplete="dlgCan.hide();" />
            </h:form>
        </p:dialog>

    </ui:define>
</ui:composition>
